<!-- 转发 -->
<template>
  <el-dialog title="转发" :visible.sync="visible" width="800px" @close="close">
    <div class="forward-content">
      <el-transfer
        filterable
        filter-placeholder="请输入群名称/联系人"
        :titles="['未选', '已选']"
        v-model="selectList"
        :props="{
          key: 'id',
          label: 'name'
        }"
        :data="data"
      >
        <template slot-scope="{ option }">
          <div class="group_item">
            <chatAvatar
              :content="getContentAvatar(option, option.isGroup)"
            ></chatAvatar>
            <span class="chat_name">{{ option.name }}</span>
          </div>
        </template>
      </el-transfer>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="close">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { searchContactAndGroup } from "@/api/user"
import { mapState } from "vuex"
import chatAvatar from "./avatar.vue"
import { massSending } from "@/api/chat"
export default {
  components: { chatAvatar },
  data() {
    return {
      visible: false,
      selectList: [],
      data: [],
      instance: {}
    }
  },
  computed: {
    ...mapState(["groupList", "receiverId", "userInfo"])
  },

  methods: {
    close() {
      this.visible = false
      setTimeout(() => {
        this.$destroy()
        this.$el.remove()
      }, 300)
    },
    open(instance) {
      this.instance = instance
      this.visible = true
      this.getContactAndGroupList()
    },
    async getContactAndGroupList() {
      const res = await searchContactAndGroup()
      const groups = res.data.groups.map((item) => {
        return { ...item, isGroup: true }
      })
      const personals = res.data.personals.map((item) => {
        return {
          ...item,
          isGroup: false,
          disabled: item.id == this.userInfo.userId
        }
      })
      this.data = [...groups, ...personals]
    },
    getContentAvatar(chat, isGroup) {
      if (isGroup) {
        const curGroup = this.groupList.find((item) => item.id === chat.id)
        return curGroup ? curGroup.avatarList : chat.name
      } else {
        return chat.avatar || chat.name
      }
    },
    async handleSubmit() {
      const params = {
        ...this.instance,
        senderId: this.userInfo.userId,
        senderName: this.userInfo.userName,
        massReceivers: this.selectList.map((id) => {
          const chatItem = this.data.find((item) => item.id == id)
          return {
            isGroup: chatItem.isGroup,
            receiverId: chatItem.id,
            receiverName: chatItem.name
          }
        })
      }
      const res = await massSending(params)
      if (res.code == "200") {
        this.$store.dispatch("getRecentChatList")
        this.$message.success("转发成功")
        this.close()
      }
    }
  }
}
</script>
<style lang="less">
.forward-content {
  .el-transfer-panel {
    width: 285px;
    height: 400px;
  }

  .el-transfer-panel__body {
    height: 350px;
  }

  .el-transfer-panel__filter {
    width: 90% !important;
  }

  .el-transfer-panel__item {
    display: flex !important;
    align-items: center;
    height: 50px;
    .el-checkbox__input {
      position: relative;
      top: unset;
      padding-left: 6px !important;
    }
    .el-checkbox__label {
      padding-left: 6px !important;
    }
  }
  .el-transfer-panel__list.is-filterable {
    height: 100% !important;
  }
}
</style>
